<template>
  <div style="height: auto">
    <!-- 左侧导航栏 -->
    <el-menu
      class="el-menu-vertical-demo"
      style="width: 170px; height: 500px"
      background-color="rgb(236, 199, 164)"
    >
      <div
        v-for="item in TypeName"
        :key="item.id"
        @click="toHomeuse(item.id)"
        style="text-align: center; margin-top: 1rem"
      >
        <el-link sype="primary" style="line-height: 30px">
          {{ item.typeName }}
        </el-link>
      </div>
    </el-menu>

    <!-- 轮播图 -->
    <div id="app">
      <el-carousel :interval="5000" arrow="always" height="520px">
        <el-carousel-item v-for="(img, index) in imgList" :key="index">
          <img v-bind:src="img.url" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 猜你喜欢 -->
    <div class="guessyou">
      <span style="margin-left: 1rem"
        >猜你喜欢
        <img
          src="https://img.alicdn.com/imgextra/i3/O1CN01x0HokP1RvHJCaEcuY_!!6000000002173-2-tps-65-20.png"
          alt=""
        />
      </span>
    </div>

    <div
      v-for="item in Commodity"
      :key="item.index"
      @click="toDetails(item.id)"
      class="hoverDetails"
    >
      <el-card
        style="width: 250px; float: left; text-align: center"
        class="card1"
      >
        <img
          src="https://img.alicdn.com/bao/uploaded/i1/73036207/O1CN01ncQsbH1vir4KVKZ70_!!73036207.jpg_200x200q90.jpg_.webp"
          alt=""
        />
        <span>商品名：{{ item.commodityName }}</span>
        <h4>价格：{{ item.commodityMoney }}￥</h4>
      </el-card>
    </div>
  </div>
</template>

<script>
import { CommodityType, GetCommodity } from '../api/home'
export default {
  name: 'app',
  data () {
    return {
      imgList: [
        { url: require('../assets/lb1.jpg') },
        { url: require('../assets/lb2.jpg') },
        { url: require('../assets/lb3.jpg') }
      ],
      TypeName: [

      ],
      Commodity: []
    }


  },
  mounted: function () {
    this.getType();
    this.GetCommoditys();
  },
  methods: {
    // 路由事件
    toHomeuse (id) {
      this.$router.push({ name: "home", params: { key: id } });
    },
    //获得分类列表
    getType () {
      CommodityType().then((res) => {

        this.TypeName = res.data.data;
        console.log(this.TypeName);
      });
    },
    GetCommoditys () {
      GetCommodity().then((res) => {
        this.Commodity = res.data.data;
        console.log(this.Commodity);

      })
    },
    homeuse () {
      this.$router.push('/homeuse')
    },
    toDetails (id) {
      this.$router.push({ name: 'details', params: { id: id } })
    }
  }

}
</script>

<style scoped>
.el-carousel {
  /* width: auto; */
  margin-left: 170px;
  top: -520px;
}
.el-main {
  background-color: rgb(236, 199, 164);
  height: 990px;
}

.btn1 {
  position: absolute;
  left: 50%;
}
.car {
  position: absolute;
  left: 75%;
}
.btn2 {
  position: absolute;
  left: 60%;
}
.img {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 55px;
}
/* .el-input__inner { */
/* width: 300px !important; */
/* position: absolute;
  left: 40%;
  top: 50px; */
/* } */
.btn3 {
  position: absolute;
  left: 60%;
  top: 95px;
}
.guessyou {
  font-size: 24px;
  color: #111;
  font-weight: bold;
  line-height: 24px;
  margin-top: -500px;
}

.el-card {
  background-color: transparent !important;
  border: 0;
  color: #1e301a;
}
.card1 {
  margin-left: 12%;
  margin-top: 50px;
}

/* .card11{
  margin-top: 530px;
  height: 100px;
} */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel {
  width: 1500px !important;
  margin-left: 500px;
}
.el-menu {
  border-right: none;
  /* margin-top: -20px; */

  /* background-color: transparent !important; */
}
.el-menu-item {
  margin-left: -20px;
}
.hoverDetails {
  cursor: pointer;
}
</style>